<template>
	<div>
		<div>

			<el-button size="mini" type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">创建评审账号</el-button>
		</div>
		<el-dialog title="创建账号" :visible.sync="dialogFormVisible">
			<el-form :model="reviewer">
				<el-form-item label="评审用户名" :label-width="formLabelWidth">
					<el-input v-model="reviewer.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="评审手机账号" :label-width="formLabelWidth">
					<el-input v-model="reviewer.phone" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="评审密码" :label-width="formLabelWidth">
					<el-input v-model="reviewer.password" autocomplete="off" type="password"></el-input>
				</el-form-item>
				<el-form-item label="重复密码" :label-width="formLabelWidth">
					<el-input v-model="reviewer.repassword" autocomplete="off" type="password"></el-input>
				</el-form-item>
				<el-form-item label="职位" :label-width="formLabelWidth">
					<el-input v-model="reviewer.email" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="地址" :label-width="formLabelWidth">
					<el-input v-model="reviewer.address" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createReviewer">创建</el-button>
			</div>
		</el-dialog>

		<el-table :data="reviewersList" stripe style="width: 100%">
			<el-table-column prop="username" label="评委名" width="180">
			</el-table-column>

			<el-table-column prop="isenable" label="是否可用" width="150">
			</el-table-column>
			<el-table-column prop="phone" label="电话">
			</el-table-column>
			<el-table-column prop="email" label="职位">
			</el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>

			<el-table-column label="所属分组">
				<template slot-scope="scope">
					<el-select v-model="scope.row.group.groupName" @visible-change="getGroupMessage(scope.$index,scope.row)" @change="changeGroup"
					 placeholder="选择分组" size="mini" style="width: 100px;">
						<el-option v-for="item in groupsList" :key="item.id" :label="item.groupName" :value="item.id" :disabled="item.disabled">
						</el-option>
					</el-select>
				</template>

			</el-table-column>

			<el-table-column fixed="right" label="操作" width="250">

				<template slot-scope="scope">

					<template v-if="scope.row.isenable">
						<el-button slot="reference" type="danger" style="padding: 3px; margin-left: 10px;" @click="updateEnable(scope.row.id)">禁用</el-button>
					</template>
					<template v-if="!scope.row.isenable">
						<el-button slot="reference" type="success" style="padding: 3px; margin-left: 10px;" @click="updateEnable(scope.row.id)">解除禁用</el-button>
					</template>

				</template>

			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: "Reviewers",
		data() {
			return {
				reviewersList: [],
				groupsList: [],
				reviewerId: '',
				reviewer: {
					username: "",
					password: "",
					repassword: "",
					phone: "",
					email: "",
					address: ""
				},
				formLabelWidth: "200px",
				dialogFormVisible: false
			}
		},
		mounted() {
			this.initReviewersList();
			this.initGroupsList();
		},
		methods: {
			//增加一个评审账号
			createReviewer() {
				if (this.reviewer.password != this.reviewer.repassword) {
					this.$message({
						message: '两次输入的密码不一致！',
						type: 'warning'
					});
				} else {
					this.postRequest("/reviewers/add", this.reviewer).then(res => {
						if (res) {
							this.initReviewersList();
							this.reviewer = {};
							this.dialogFormVisible = false;
						}
					})
				}
			},
			// 获取评审员的id
			getGroupMessage(index, data) {
				this.reviewerId = data.id;
			},
			// 获取当前选择的组id
			changeGroup(data) {
				this.putRequest("/reviewers/updateGroup/?groupId=" + data + '&reviewerId=' + this.reviewerId).then(res => {
					this.initReviewersList();
				})
			},
			initGroupsList() {
				this.getRequest("/group/").then(res => {
					if (res) {
						this.groupsList = res.obj;
					}
				})
			},
			updateEnable(id) {
				console.log("-----》》》》");
				this.putRequest("/reviewers/update/?id=" + id).then(res => {
					if (res) {
						this.initReviewersList();
					}
				})
			},
			initReviewersList() {
				this.getRequest("/reviewers/").then(res => {
					if (res) {
						console.log(res);
						this.reviewersList = res.obj;
					}
				})
			}
		},
	}
</script>

<style>
</style>
